<template>
	<view class="content">
		<view class="top">
			<image class="topbg" src="../../static/chouShang/topBg.png" mode="widthFix"></image>
			<view class="title">
				<view class="back">
					<!-- 返回键 -->
					<TextNavBar :bgColor="titleBgColor" title=" " style="position:relative;z-index: 9;"></TextNavBar>
				</view>
			</view>

			<view class="left-menu">
				<view class="item" @tap="openBangdan1">
					<image src="../../static/chouShang/No.png" mode="widthFix"></image>
					<view>消费榜</view>
				</view>
				<view class="item" @tap="rule">
					<image src="../../static/chouShang/rule.png" mode="widthFix"></image>
					<view>规则</view>
				</view>
				<!-- <view class="item">
					<image src="../../static/chouShang/collect.png" mode="widthFix"></image>
					<view>收藏</view>
				</view> -->
			</view>

			<view class="center-img">
				<image src="../../static/chouShang/banner.png" mode="widthFix"></image>
			</view>

			<view class="right-menu">
				<view class="item1">
					<navigator url="/pages/myBox/index">
						我的仓库
					</navigator>
				</view>

				<view class="item2" @tap="openBangdan()">
					抽奖记录
				</view>
			</view>

			<view class="bottom-box">
				<view class="line1">
					<text :class="l1Sty" @tap="styChange(1)">赏品一览</text>
					<text :class="l2Sty" @tap="styChange(2)">赏品余量</text>
				</view>
				<view class="line2">
					<view class="item">
						<text style="font-size: 26rpx; color: rgba(255, 255, 255, 1);">第</text>
						<text style="font-size: 26rpx;margin:0 10rpx;">{{index+1}} &nbsp;/&nbsp; {{total}}</text>
						<image src="../../static/chouShang/box.png" mode="widthFix"></image>

					</view>
					<view class="item" style="margin-top: 5rpx;">
						<text style="font-size: 26rpx; color: rgba(255, 255, 255, 1);">剩余</text>
						<text style="font-size: 26rpx;margin:0 10rpx;">{{stock_has}} &nbsp;/&nbsp; {{stock_all}}</text>
						<image src="../../static/chouShang/zhang.png" mode="widthFix"></image>

					</view>
				</view>

				<view class="line3">
					<!-- 空车X1 -->
				</view>

				<view class="line4">
					<view class="last" @tap="last">
						上一箱
					</view>
					<view class="next" @tap="next">
						下一箱
					</view>
				</view>
			</view>
		</view>

		<view class="tit">
			<view class="tips">
				赏品只赠送不售卖
			</view>
			<view class="ref" @tap="itemInfo">
				<image src="../../static/chouShang/ref.png" mode="widthFix"></image>
			</view>
			<!-- <view class="msg">
				<image src="../../static/chouShang/msg.png" mode="widthFix"></image>
				<text>消息</text>
				<view class="num">11</view>
			</view> -->
		</view>

		<view class="goods">
			<view class="hang">
				<scroll-view scroll-y="true" style="height: 38vh;" v-if="ylStatus">
					<view class="yl-item" v-for="item in goods.skus">
						<view class="title">
							{{item.title}}
						</view>
						<view class="num">11
							{{item.stock}}/{{item.stock + item.sales}}
						</view>
						<view class="bl">
							<image class="icon" src="../../static/chouShang/bl.png" mode="widthFix"></image>
							实时概率 <text style="font-size: 24rpx;">{{formatPrice1(item.odds)}}%</text>
						</view>
					</view>
				</scroll-view>
				<scroll-view scroll-y="true" style="height: 38vh;" v-else>
					<view class="item" v-for="item in goods.last_skus">
						<view class="left" :style="{'background':'url(' + item.thumb + ')' , 'background-repeat'
							:'no-repeat', 'background-size' :'100% 100%' }" @tap="bigImg(index,1)">

							<view class="gang" v-if="item.stock > 0">
								{{item.stock}}/{{item.stock + item.sales}}
							</view>
							<view class="gang1" v-if="item.stock == 0">
								<view class="sw">售罄</view>
							</view>
							<!-- <view class="he">
								05/20出荷
							</view> -->
						</view>
						<view class="right">

							<view class="title">
								{{item.title}}
							</view>

							<view class="price">
							</view>

							<view class="price">
								<text v-if="goods.play_type == 1 || goods.play_type == 3">
									参考价:{{formatPrice(item.money_price)}}元
								</text>
								<text v-else>
									参考价:{{item.score_price}}纪元币
								</text>
							</view>

						</view>
					</view>

					<view class="item" v-for="(item,index) in goods.skus">
						<view class="left" :style="{'background':'url(' + item.thumb + ')' , 'background-repeat'
							:'no-repeat', 'background-size' :'100% 100%' }" @tap="bigImg(index,2)">

							<view class="gang" v-if="item.stock > 0">
								{{item.stock}}/{{item.stock + item.sales}}
							</view>
							<view class="gang1" v-if="item.stock == 0">
								<view class="sw">售罄</view>
							</view>
							<!-- <view class="he">
								05/20出荷
							</view> -->
						</view>

						<view class="right">
							<view class="title">
								{{item.title}}
							</view>
							<view class="price">
								<text v-if="goods.play_type == 1 || goods.play_type == 3">
									参考价:{{formatPrice(item.money_price)}}元
								</text>
								<text v-else>
									参考价:{{item.score_price}}纪元币
								</text>
							</view>
							<view class="gl">
								获得概率:{{formatPrice1(item.odds)}}%
							</view>
						</view>
					</view>


				</scroll-view>
			</view>
		</view>
		<OpenBoxPopupTheme2 :config="config" boxImgMode="square" :tryMode="isTryMode" v-if="isShowResultPopup"
			:order="order" @close="goBack" :boxImg="boxImage"></OpenBoxPopupTheme2>

		<RecordList v-if="isShowRankList" @close="closeBangdan" :skuLevel="skuLevel" :info="goods">
		</RecordList>
		
		<TopList v-if="isShowTopList" @close="closeTopList" :skuLevel="skuLevel" :info="goods">
		</TopList>

		<PayCard :info="payInfo" @close="hidePayPopup" @success="paySuccess" v-if="isPayPopup"></PayCard>
		<view class="show2">
			<view class="con" @tap="pay(1)">
				开x1
			</view>
			<view class="con" @tap="pay(5)">
				开x5
			</view>
			<view class="con" @tap="pay(10)">
				开x10
			</view>
			<view class="con" @tap="pay(30)">
				开x30
			</view>
		</view>

		<view class="menu-box">
			<view class="left" @tap="huan()">
				换箱
			</view>
			<view class="right" @tap="allPlay" v-if="quanshow">
				全开
			</view>
			<view class="right1" v-else>
				全开
			</view>
		</view>

		<uni-popup ref="huan" type="center">
			<view class="huanCon">
				<view style="text-align: center;">温馨提示</view>
				<input class="ip" type="number" v-model="changeNum" placeholder="请输入要换的箱子序号"
					placeholder-style="color:#333333;font-size:22rpx">
				<view class="btn">
					<view class="left" @tap="closeHuan">取消</view>
					<view class="right" @tap="huanTrue">确认</view>
				</view>
			</view>
		</uni-popup>

		<uni-popup ref="xiang" type="center">
			<view class="xiangCon">
				<image @tap="tipsClose" class="close-btn" src="../../static/chouShang/close-icon.png" mode="widthFix">
				</image>
				<view style="text-align: center;">温馨提示</view>
				<image :src="tipsImg" mode="widthFix"></image>
				<view class="tips">{{tips}}</view>
			</view>
		</uni-popup>

		<uni-popup ref="rule" type="center" style="width: 100%;">
			<view class="ruleCon">
				<image @tap="tipsClose" class="close-btn" src="../../static/chouShang/close-icon.png" mode="widthFix">
				</image>
				<view style="text-align: center;">本箱规则</view>
				<view class="rule_content" style="white-space:pre-wrap;" v-html="ruleContent">

				</view>

			</view>
		</uni-popup>

		<uni-popup ref="tu" type="center">
			<view class="tuCon">
				<image @tap="tuClose" class="close-btn" src="../../static/chouShang/close-icon.png" mode="widthFix">
				</image>
				<image class="thumb" :src="imgInfo.thumb" mode="widthFix"></image>
				<view>{{imgInfo.title}}</view>
				<view style="font-size:22rpx">
					<text v-if="goods.play_type == 1 || goods.play_type == 3">
						参考价:{{formatPrice(imgInfo.money_price)}}元
					</text>
					<text v-else>
						参考价:{{imgInfo.score_price}}纪元币
					</text>
					<!-- 参考价:{{formatPrice(imgInfo.money_price)}}元 -->
				</view>
				<view style="font-size:22rpx" v-if="bigType==2">获得概率:{{formatPrice1(imgInfo.odds)}}%</view>
			</view>
		</uni-popup>
		
		
		<FreeTicketFloatBtn v-if="goods.is_invite_enabled || goods.is_share_enabled" @useFreeTicket="useFreeTicket" :uuid="uuid" nodeType="choushang">
		</FreeTicketFloatBtn>

	</view>
</template>
<script>
	import PayCard from "./components/PayCard.vue"
	import RecordList from "./components/RecordList.vue"
	import TopList from "./components/TopList.vue"
	import {
		mapGetters
	} from "vuex"
	export default {
		components: {
			PayCard,
			RecordList,
			TopList,
		},

		data() {
			return {
				pageUuid: '',
				index: 0,
				uuid: '',
				list: [],
				total: 0,
				goods: [],
				stock_has: 0,
				stock_all: 0,
				isPayPopup: false,
				num: 1,
				tips: '当前是最后一箱了',
				tipsImg: '../../static/chouShang/null.png',
				isTryMode: false,
				isShowResultPopup: false,
				isShowRankList: false,
				isShowTopList: false,
				
				config: {},
				order: {},
				quanshow: false,
				ruleContent: '',
				ylStatus: false,
				l1Sty: 'liang',
				l2Sty: 'hui',
				changeNum: '',
				imgInfo: '',
				title: '',
				imgUrl: '',
				bigType: '',
				bj:false
			};
		},
		

		onLoad(option) {
			this.title = option.title;
			this.imgUrl = option.imgUrl;
			this.goodsInfo();
			console.log(this.userInfo,88999777)
		},
		

		// onShareAppMessage() {
		// 	return {
		// 		title: decodeURIComponent(this.title),
		// 		path: '/packageA/pages/chouShang/index?title=' + this.title + '&imgUrl=' + this.imgUrl,
		// 		imageUrl: this.imgUrl, //自定义图片的地址
		// 		success(res) {
		// 			console.log('分享成功！')
		// 		}
		// 	}
		// },

		computed: {
			...mapGetters(["userInfo"]),
			payInfo() {
				console.log(345);
				return {
					// page_uuid: this.pageUuid,
					title: this.goods.title,
					activity_id: this.list[this.index].id,
					payNum: this.num,
					total: this.num * this.list[this.index].money_price,
					money_price: this.list.money_price,
					score_price: this.goods.score_price
				}
			},

			boxImage() {
				return this.goods.image_3d || 'https://cdn2.hquesoft.com/box/fudai/box.png'
			},

			skuLevel() {
				return this.goods.sku_level || []
			},
			share() {
				return {
					title: decodeURIComponent(this.title),
					thumb: this.imgUrl,
					path:'/packageA/pages/chouShang/index?title='+this.title+'&imgUrl='+this.imgUrl+'&uuid=' + this.uuid +
						'&invite_node=choushang-' + this.uuid
				}
			},
		},

		methods: {
			huan() {
				this.$refs.huan.open()
			},
			closeHuan() {
				this.$refs.huan.close()
			},
			bigImg(index, e) {
				this.bigType = e;
				if (e == 1) {
					this.imgInfo = this.goods.last_skus[index];

				} else {
					this.imgInfo = this.goods.skus[index];
				}
				console.log(this.bigType)
				this.$refs.tu.open()
			},
			tuClose() {
				this.$refs.tu.close();
			},
			huanTrue() {

				if (this.changeNum >= 1 && this.changeNum <= this.total) {
					this.closeHuan();
					this.index = this.changeNum - 1;
					console.log(this.index);

					this.uuid = this.list[this.index]['uuid'];
					this.itemInfo()
					this.changeNum = '';
					this.$forceUpdate()
				} else {
					uni.showToast({
						title: '请输入1到' + this.total + '之间的箱子序号',
						icon: "none"
					})
				}
			},
			styChange(num) {
				if (num == 1) {
					this.ylStatus = false;
					this.l1Sty = 'liang';
					this.l2Sty = 'hui';
				} else {
					this.ylStatus = true;
					this.l1Sty = 'hui';
					this.l2Sty = 'liang';
				}
			},

			formatPrice(price) {
				return (price / 100).toFixed(2)
			},
			formatPrice1(price) {
				return (price * 1).toFixed(3)
			},
			closeBangdan() {
				this.isShowRankList = false
			},
			openBangdan() {
				this.isShowRankList = true
			},
			
			closeTopList() {
				this.isShowTopList = false
			},
			
			openBangdan1() {
				console.log(88777)
				this.isShowTopList = true
			},

			goodsInfo() {
				this.$http('/choushangs', 'GET', {
					title: this.title
				}).then(res => {
					console.log(res);
					console.log(123);
					this.total = res.data.item_total;
					this.list = res.data.list;
					this.config = {
						'animation_mode': "theme1",
						'is_show_rank': 0,
						'show_odds_mode': "disable"
					}
					if (res.data.min_id < res.data.item_total) {
						this.index = res.data.min_id;
						this.min_id = res.data.min_id
					}else{
						this.index = parseInt(res.data.min_id) - 1;
						this.min_id = parseInt(res.data.min_id) - 1;
					}
					this.uuid = this.list[this.index]['uuid'];
					this.itemInfo();
				})
			},

			last() {
				if (this.index == 0) {
					this.tips = '前面箱子都售馨了';
					this.tipsImg = '../../static/chouShang/qin.png';
					this.$refs.xiang.open()
					return false;
				} else {
					if(this.bj){
						uni.showLoading({
							mask:true,
							title:'加载中...'
						})
					}else{
						this.index = this.index - 1;
						this.uuid = this.list[this.index]['uuid'];
						this.itemInfo()
					}
					
				}

			},

			next() {
				if (this.index >= (this.total - 1)) {
					this.tips = '当前是最后一箱了';
					this.tipsImg = '../../static/chouShang/null.png';
					this.$refs.xiang.open()
					return false;
				} else {
					if(this.bj){
						uni.showLoading({
							mask:true,
							title:'加载中...'
						})
					}else{
						this.index = this.index + 1;
						this.uuid = this.list[this.index]['uuid'];
						this.itemInfo()
					}
				}
			},

			itemInfo() {
				this.$http(`/choushangs/${this.uuid}`).then(res => {
					this.goods = res.data.info
					this.stock_has = res.data.info.stock_has;
					this.stock_all = res.data.info.stock_all;
					console.log(this.goods);
					this.ruleContent = res.data.info.rules;
					var sy = this.stock_has / this.stock_all * 100;
					if (sy <= 30) {
						this.quanshow = true;
					} else {
						this.quanshow = false;
					}
					this.bj = false;
					uni.hideLoading()
				})
			},

			pay(num) {
				this.num = num;
				this.isPayPopup = true
			},

			allPlay() {
				this.num = this.stock_has;
				this.isPayPopup = true
			},

			paySuccess(order, isTryMode = false) {
				this.isTryMode = isTryMode
				this.order = order
				this.isPayPopup = false
				this.isShowResultPopup = true
				// 购买成功
				this.refresh()
			},

			refresh() {
				this.$store.dispatch("getUserInfo");
			},
			hidePayPopup() {
				this.isPayPopup = false
			},
			tipsClose() {
				this.$refs.xiang.close();
				this.$refs.rule.close()
			},

			rule() {
				this.$refs.rule.open()
			},
			goBack() {
				this.isShowResultPopup = false;
				this.goodsInfo()
			},
		}
	};
</script>
<style lang='scss'>
	.content {
		width: 100%;
		background: #F4E4C2;
		overflow-x: hidden;
		overflow-y: auto;

		.top {
			width: 100%;
			/* height: 60vh; */
			/* 	background-image: url('../../static/chouShang/topBg.png');
			background-repeat: no-repeat;
			background-size: 100% 100%; */
			position: relative;

			.topbg {
				width: 100%;
			}


			.left-menu {
				z-index: 99;
				display: flex;
				flex-direction: column;
				justify-content: center;
				width: 14%;
				font-size: 20rpx;
				color: #fff;
				position: absolute;
				top: 20%;


				.item {
					text-align: center;

					image {
						width: 50%;
						margin-top: 30rpx;
					}
				}
			}


			.center-img {
				width: 100%;
				position: absolute;
				top: 21%;
				left: 3%;

				image {
					width: 94%;
				}
			}

			.right-menu {
				z-index: 99;
				font-size: 20rpx;
				color: #fff;
				position: absolute;
				top: 23%;
				right: 0;

				.item1 {
					width: 170rpx;
					height: 64rpx;
					line-height: 64rpx;
					background: url('../../static/chouShang/mysd.png') no-repeat;
					background-size: 100% 100%;
					text-align: center;
					padding-left: 10%;
				}

				.item2 {
					margin-top: 20rpx;
					width: 170rpx;
					height: 64rpx;
					line-height: 64rpx;
					background: url('../../static/chouShang/drawLog.png') no-repeat;
					background-size: 100% 100%;
					text-align: center;
					padding-left: 10%;
				}
			}

			.bottom-box {
				z-index: 99;
				position: absolute;
				top: 58%;
				left: 5%;

				width: 90%;
				height: 280rpx;
				background: url('../../static/chouShang/bottomBg.png') no-repeat;
				background-size: 100% 100%;
				font-weight: bold;

				.line1 {
					margin-top: 30rpx;
					margin-left: 50rpx;

					.liang {
						font-size: 40rpx;
						color: rgba(255, 255, 255, 1);
						margin-left: 10rpx;
					}

					.hui {
						font-size: 30rpx;
						color: rgba(255, 255, 255, 0.7);
						margin-left: 10rpx;
					}
				}

				.line2 {
					margin-top: 15rpx;
					margin-left: 60rpx;

					.item {
						display: flex;
						align-items: center;

						image {
							width: 6%;
						}
					}
				}

				.line3 {
					width: 132rpx;
					height: 40rpx;
					line-height: 40rpx;
					/* background: url('../../static/chouShang/kong.png') no-repeat; */
					background-size: 100% 100%;
					text-align: center;
					color: rgba(255, 255, 255, 1);
					margin-top: 1%;
					margin-left: 40%;
					font-size: 20rpx;
				}

				.line4 {
					width: 208rpx;
				position: absolute;
				top: 32rpx;
				right: 62rpx;
					font-weight: normal;

					.last {
						width: 208rpx;
						height: 92rpx;
						text-align: center;
						line-height: 74rpx;
						padding-left: 20rpx;
						background: url('../../static/chouShang/last.png') no-repeat;
						background-size: 100% 100%;
					}

					.next {
						width: 208rpx;
						height: 92rpx;
						text-align: center;
						line-height: 74rpx;
						padding-left: 20rpx;
						background: url('../../static/chouShang/next.png') no-repeat;
						background-size: 100% 100%;
					}
				}
			}
		}

		.tit {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 5%;
			font-size: 24rpx;
			z-index: 2;
			position: relative;
			margin-top: -10%;

			.tips {
				width: 274rpx;
				height: 52rpx;
				text-align: center;
				line-height: 52rpx;
				color: #FFF3C7;
				background: url('../../static/chouShang/tips-bg.png') no-repeat;
				background-size: 100% 100%;
			}

			.ref {
				image {
					width: 50rpx;
				}
			}

			.msg {
				width: 120rpx;
				height: 52rpx;
				line-height: 52rpx;
				text-align: center;
				background: #fff;
				border-radius: 26rpx;

				image {
					width: 25%;
					vertical-align: middle;
					margin-top: -5rpx;
				}

				.num {
					width: 35rpx;
					height: 35rpx;
					border-radius: 100%;
					position: relative;
					margin-left: 48px;
					margin-top: -35px;
					background-color: #e67217;
					line-height: 35rpx;
					color: #fff;
				}

			}

		}

		.goods {
			width: 94%;
			/* height: 40vh; */
			background: #F4E4C2;
			border-radius: 12px 12px 0px 0px;
			padding: 5% 3%;
			position: relative;
			margin-top: -5%;

			.hang {
				width: 100%;
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				justify-content: space-between;
				padding-bottom: 16vh;

				.item {
					width: 48%;
					margin-top: 20rpx;
					display: inline-flex;
					justify-content: space-between;
					align-items: center;

					.left {
						width: 40%;
						height: 140rpx;
						border-radius: 12rpx;
						/* background: url('../../static/chouShang/face.png') no-repeat;
						background-size: 100% 100%; */
						border: 1px solid #FFFFFF;
						font-size: 22rpx;
						color: #fff;

						.gang {
							width: 95%;
							height: 40rpx;
							text-align: center;
							line-height: 40rpx;
							background: url('../../static/chouShang/gbg.png') no-repeat;
							background-size: 100% 100%;
							white-space: nowrap;
							overflow-x: hidden;
							text-overflow: ellipsis;
						}

						.gang1 {
							width: 100%;
							height: 100%;
							text-align: center !important;
							background-color: rgba(0, 0, 0, 0.6);
							border-radius: 12rpx;

							.sw {
								width: 30%;
								height: 75rpx;
								border: 2px solid #fff;
								background-color: red;
								color: #fff;
								font-size: 28rpx;
								font-weight: bold;
								transform: translateX(90%) translateY(35%);
							}

						}

						.he {
							height: 40rpx;
							line-height: 40rpx;
							margin-top: 59rpx;
							text-align: center;
							background: rgba(0, 0, 0, 0.5);
							border-radius: 0px 0px 5px 5px;
						}

					}

					.right {
						width: 58%;
						height: 140rpx;

						.title {
							font-size: 24rpx;
							height: 65rpx;
							display: -webkit-box;
							overflow: hidden;
							text-overflow: ellipsis;
							word-wrap: break-word;
							white-space: normal !important;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
							color: #33251A;
						}

						.price {
							font-size: 22rpx;
							color: #5C4737;
						}

						.gl {
							font-size: 22rpx;
							color: #5C4737;
							margin-top: 10rpx;
						}

					}
				}

				.yl-item {
					width: 100%;
					height: 50rpx;
					line-height: 50rpx;
					padding: 4rpx;
					display: inline-flex;
					justify-content: space-between;
					align-items: center;
					background: #FFF2D7;
					border-radius: 6rpx;
					margin-top: 10rpx;
					font-size: 28rpx;

					.title {
						width: 32%;
						padding-left: 20rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.num {
						width: 30%;
						color: #33251A;
						font-size: 24rpx;
						margin-left: 5rpx;
						/* text-align: center; */
					}

					.bl {

						width: 38%;
						text-align: left;
						padding-right: 20rpx;

						.icon {
							width: 8%;
							vertical-align: middle;
						}
					}
				}


			}

		}

		.show2 {
			width: 100%;
			position: fixed;
			bottom: 10%;
			/* left: 35%; */
			text-align: center;
			font-size: 32rpx;
			font-weight: bold;
			color: #FFFFFF;
			display: flex;
			justify-content: space-between;

			.con {
				width: 232rpx;
				height: 140rpx;
				line-height: 130rpx;
				text-align: center;
				background: url('../../static/chouShang/show.png');
				background-repeat: no-repeat;
				background-size: 100% 100%;
			}

		}

		.menu-box {
			width: 100%;
			position: fixed;
			bottom: 3%;
			left: 0;
			text-align: center;
			font-size: 32rpx;
			font-weight: bold;
			color: #FFFFFF;

			.left {
				width: 340rpx;
				height: 80rpx;
				text-align: center;
				line-height: 80rpx;
				background: url('../../static/chouShang/blue-bg.png') no-repeat;
				background-size: 100% 100%;
				display: inline-block;
			}

			.right {
				margin-left: 30rpx;
				width: 340rpx;
				height: 80rpx;
				text-align: center;
				line-height: 80rpx;
				background: url('../../static/chouShang/orange-bg.png') no-repeat;
				background-size: 100% 100%;
				display: inline-block;
				color: #fff;
			}

			.right1 {
				margin-left: 30rpx;
				width: 340rpx;
				height: 80rpx;
				text-align: center;
				line-height: 80rpx;
				background: url('../../static/chouShang/orange-bg.png') no-repeat;
				background-size: 100% 100%;
				display: inline-block;
				color: #666666;
			}
		}

		.huanCon {
			width: 400rpx;
			margin: 0 auto;
			padding: 50rpx;
			background: #fff;
			min-height: 250rpx;
			border-radius: 20rpx;

			input {
				height: 50rpx;
				border: 2rpx solid #ccc;
				margin: 60rpx 20rpx;
				border-radius: 10rpx;
				padding-left: 20rpx;
			}

			.btn {
				display: flex;
				justify-content: space-between;

				.left {
					width: 40%;
					height: 50rpx;
					line-height: 50rpx;
					text-align: center;
					color: #A6A6A6;
				}

				.right {
					width: 40%;
					height: 50rpx;
					line-height: 50rpx;
					text-align: center;
				}
			}


		}

		.ruleCon {
			width: 400rpx;
			margin: 0 auto;
			padding: 50rpx;
			background: #fff;
			min-height: 500rpx;
			border-radius: 20rpx;

			.rule_content {
				font-size: 26rpx;
				font-weight: 400;
				color: #666666;
				line-height: 44rpx;
			}

			.close-btn {
				width: 10%;
				position: absolute;
				right: 0;
				top: 0;
			}

		}

		.xiangCon {
			background: #fff;
			width: 260px;
			padding: 30rpx 0;
			background: #FFFFFF;
			border-radius: 12px;
			text-align: center;

			image {
				width: 35%;
			}

			.tips {
				font-size: 26rpx;
				color: #A6A6A6;
			}

			.close-btn {
				height: 31.1875px;
				width: 12%;
				position: absolute;
				right: 0;
				top: 0;
			}
		}

		.tuCon {
			width: 500rpx;
			margin: 0 auto;
			padding: 50rpx;
			background: #fff;
			min-height: 250rpx;
			border-radius: 20rpx;

			.thumb {
				width: 100%;
			}

			.close-btn {
				height: 31.1875px;
				width: 12%;
				position: absolute;
				right: 0;
				top: 0;
			}
		}


	}
</style>
